<template>
  <div class="account-manage flex-column" v-loading="loading">
    <div class="page-head action-bar flex-row-between flex-row-center">
      <div>团队名称 : {{ $g.session.data || "无" }}</div>
      <el-button type="primary" @click="setDesign({})">成员添加</el-button>
    </div>
    <div class="page-body">
      <div class="action-bar flex-row-between flex-row-center">
        <el-space class="flex-row-center">
          <el-input placeholder="请输入"></el-input>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-space>
      </div>
      <el-table :data="data" border="" stripe="">
        <el-table-column type="index" label="#" width="50px" :resizable="false"></el-table-column>
        <el-table-column prop="name" label="成员姓名"></el-table-column>
        <el-table-column prop="" label="所属团队"></el-table-column>
        <el-table-column prop="" label="联系方式(账号)"></el-table-column>
        <el-table-column prop="" label="账号密码"></el-table-column>
        <el-table-column prop="" label="成员权限"></el-table-column>
        <el-table-column prop="" label="操作" width="120px" align="center">
          <template #default="scoped">
            <el-button type="primary" plain size="small" @click="setDesign(scoped.row)">编辑</el-button>
            <el-button type="danger" plain size="small" @click="remove(scoped.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      width="500px"
      :title="design && design.id ? '成员编辑' : '成员添加'"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :model-value="design ? true : false"
      @close="setDesign()"
    >
      <AccountDesign v-if="design" :design="design" @close="setDesign()"></AccountDesign>
    </el-dialog>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";
import AccountDesign from "./AccountDesign.vue";
export default {
  extends: BaseComponent,
  name: "AccountManage",
  components: { AccountDesign },
  data() {
    return { design: null, loading: false, query: {} };
  },
  computed: {
    data() {
      return [{ name: "用户1" }, { name: "用户2" }, { name: "用户3" }];
    }
  },
  created() {
    this.getData();
  },

  methods: {
    setDesign(design) {
      this.design = design;
    },
    getData() {
      this.$g.ajax.$api("account.getList", this.query).then((result) => {
        console.log(result);
        this.result = result;
      });
    },
    remove(item) {
      this.$g.ajax.$api("account.remove", item).then((result) => {
        console.log(result);
      });
    }
  }
};
</script>
<style>
.account-manage {
  flex-grow: 1;
  background-color: #eff2f9;
  z-index: 1;
}
</style>
